<!-- 
  * Copyright (c) 2022 iSoftStone Information Technology (Group) Co.,Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
<template>
	<view class="detailBox">
		<!-- banner -->
		<u-image :src="imgBanner" :showLoading="true" width="100%" height="auto" mode="widthFix" alt=""></u-image>
		<!-- 详情 -->
		<view>
			<!-- 视频 -->
			<view class="box" v-if="videoUrl">
				<!-- <video class="video" id="myVideo" :src="videoUrl" binderror="videoErrorCallback" enable-danmu danmu-btn
					show-center-play-btn='false' show-play-btn="true" controls objectFit='cover'></video> -->
				<video class="video" id="myVideo" muted :src="videoUrl" initial-time='0.01' autoplay objectFit="cover"
					:show-center-play-btn="true" :show-mute-btn="true"></video>
			</view>

			<!-- 详情图片 -->
			<view class="thumb">
				<!-- <view v-for="(item,index) in imgList" :key="index">
					<u-image :src="item" :showLoading="true" width="100%" height="auto" mode="widthFix" alt=""></u-image>
				</view> -->
				<u-parse :content="contentlist[0]" :previewImg="false" :tagStyle="style"></u-parse>
				<u-image :src="imgList[1]" :showLoading="true" width="100%" height="auto" mode="widthFix" alt=""
					@click="handelImgTab()"></u-image>
				<u-parse :content="contentlist[2]" :previewImg="false" :tagStyle="style"></u-parse>
			</view>
			<!-- 学习资料 -->
			<!-- <view class="study">
				<view class="text">学习资料</view>
				<college-list :list="schoolList" @change="gotoCourse()"></college-list>
			</view> -->
		</view>
		<u-gap height="160rpx" bgColor="#F1F3F5" v-if="state!==2"></u-gap>
		<view class="bottom" v-if="state!==2">
			<view class="btn" @click="handelChange(1)">报名</view>
		</view>
		<view class="lookBtn" @click="handelChange(2)" v-if="state!==2">
			<u--text color="#FFF" text="赛事说明" suffixIcon="arrow-right"
				iconStyle="color:#FFF; font-size: 32rpx;margin-left:5px"></u--text>
		</view>
	</view>
</template>

<script>
	import {
		getActiveById,
		getVideoList,
		addActiveSignUp,
		getRegistrateId,
		addActiveWork,
		getStudentByOpenId,
		getopenId,
		userLogin,
		getUserByOpenId,
		userEdit,
		usersave,
		getActiveLeader
	} from '@/common/api.js';
	export default {
		props: {
			activityId: Number,
			time: Number
		},
		data() {
			return {
				style: {
					// 字符串的形式
					img: 'width:100%;height:auto',
				},
				baseUrl: "",
				imgList: [
					"http://localhost::8989/file/723a67e6-dcb7-4491-a80a-96776fc24e96.png",
					"http://localhost::8989/file/364bc983-c7ad-4780-ba64-036e5052c64b.png",
					"http://localhost::8989/file/80a0c8e4-dde6-4004-8ce4-c0761ec7a039.png",
				],
				query: {
					"pageNumber": 1,
					"pageSize": 5,
				},
				imgBanner: "http://localhost::8989/file/367a30f7-5080-4f73-ae89-3f9e85d3c35a.png",
				videoUrl: "http://localhost::8989/file/5a9df262-cc57-4ebe-90d2-5bc6dd030bc8.mp4",
				schoolList: [],
				isstudent: false,
				studentState: 0,
				content: '<p><img src="http://localhost::8989/file/f7dde438-641d-49c1-bcfd-b23daac4e07a.jpg"></p><p><img src="http://localhost::8989/file/e81d42e4-ac37-4663-b510-990592dee1ca.jpg"></p><p><img src="http://localhost::8989/file/faa8aac6-27f0-4825-931b-2786363c588a.jpg"></p><p><img src="http://localhost::8989/file/15e4ef41-7601-4dfe-9acd-9418af880270.jpg"></p><p><img src="http://localhost::8989/file/81bfa4b2-0bf2-42d2-9f54-76e611367cc8.jpg"></p><p><img src="http://localhost::8989/file/bee3f958-36c7-465b-9440-8fdb6b14ebfc.jpg"></p><p><img src="http://localhost::8989/file/32599768-a983-4793-a2f5-0cd877e4ea41.jpg"></p>',
				state: 0,
				//"<p><br></p><p><img src="http://localhost::8989/file/faa8aac6-27f0-4825-931b-2786363c588a.jpg"></p><p><img src="http://localhost::8989/file/15e4ef41-7601-4dfe-9acd-9418af880270.jpg"></p><p><img src="http://localhost::8989/file/81bfa4b2-0bf2-42d2-9f54-76e611367cc8.jpg"></p><p><img src="http://localhost::8989/file/bee3f958-36c7-465b-9440-8fdb6b14ebfc.jpg"></p><p><img src="http://localhost::8989/file/df7c07af-913a-429a-b7ee-0e5ddaf8251b.jpg"></p>"
				contentlist: [
					'<p><img src="http://localhost::8989/file/f7dde438-641d-49c1-bcfd-b23daac4e07a.jpg"></p>',
					'<p><img src="http://localhost::8989/file/e81d42e4-ac37-4663-b510-990592dee1ca.jpg"></p>',
					'<p><img src="http://localhost::8989/file/faa8aac6-27f0-4825-931b-2786363c588a.jpg"></p><p><img src="http://localhost::8989/file/15e4ef41-7601-4dfe-9acd-9418af880270.jpg"></p><p><img src="http://localhost::8989/file/81bfa4b2-0bf2-42d2-9f54-76e611367cc8.jpg"></p><p><img src="http://localhost::8989/file/bee3f958-36c7-465b-9440-8fdb6b14ebfc.jpg"></p><p><img src="http://localhost::8989/file/df7c07af-913a-429a-b7ee-0e5ddaf8251b.jpg"></p>'

				],
				userInfo: {},
				loginType: 0,
				WxData: {
					nickName: "请登录",
					avatarUrl: "",
					state: "请登录"
				},
				activeState: {
					state: 0,
					now: 0,
					start: 0,
					end: 0
				},

			}
		},
		watch: {
			time: { //深度监听，可监听到对象、数组的变化
				handler(val, oldVal) {
					console.log(val, "报名时间发生变化")
					this.info()
				},
				deep: true //true 深度监听
			},
		},
		mounted: function() {
			this.info()
		},
		methods: {
			info() {
				//this.getVideoList() //获取学院课程
				this.getActiveById() //获取活动详情
				//this.getStudentByOpenId() //获取学生录入信息
				this.userInfo = this.$store.state.$userInfo
				if (!this.userInfo.openId) {
					this.loginType = 0

				} else if (!this.userInfo.phone) {
					this.loginType = 1
				} else {
					this.loginType = 2
					this.getStudentByOpenId() //获取学生录入信息

				}
				console.log(this.userInfo.openId, "获取信息")
			},
			getActiveById() {
				const data = {
					id: this.activityId
				}
				getActiveById(data).then(res => {
					if (res.id) {
						console.log(res, "活动详情")
						this.videoUrl = res.videoUrl
						this.imgBanner = res.imageUrl
						this.content = res.description
						this.state = res.state - 0
					}
				})
			},
			getVideoList() {
				getVideoList(this.query).then(res => {
					if (res.total > 0) {
						this.schoolList = res.rows
					}
				})
			},
			getStudentByOpenId() {
				const data = {
					openId: this.$store.state.$userInfo.openId
				}
				getStudentByOpenId(data).then(res => {
					if (res.id) {
						this.studentState = res.check_state
						if (res.check_state === 2) {
							this.isstudent = true
						}
					}
				})
			},
			handelChange(n) {
				if (n === 2) {
					this.$u.route({
						url: "pages/componet/activity/activeMatch/index",
						params: {
							id: 10,
							current: 3
						}
					})
					return false
				}
				if (this.loginType === 0) {
					this.loginWx()
					return false
				} else if (this.loginType === 1) {
					this.showModalPhone()
					return false
				}
				if (this.userInfo.profession !== '学生') {
					uni.$u.toast("此活动只支持学生报名")
					return false
				}
				const that = this
				if (this.studentState === 0) {
					uni.showModal({
						confirmText: "去录入",
						cancelText: "取消",
						content: "您未录入学生信息，请先录入学生信息",
						cancelColor: "#8F8F94",
						confirmColor: "#3C9CFF",
						success: function(res) {
							if (res.confirm) {
								that.$u.route({
									url: 'pages/componet/main/students/index',
								})
							}
						}
					})
					return false
				}
				console.log(this.studentState, "学生信息")
				if (n === 1) {
					this.$u.route({
						url: "pages/componet/activity/activeSingin/index",
						params: {
							id: 10,
							current: 1
						}
					})
					this.$emit("change", 1)

				} 
				/* const that = this
				if (n === 1 && this.studentState === 0) {
					uni.showModal({
						confirmText: "去录入",
						cancelText: "取消",
						content: "您未录入学生信息，请先录入学生信息",
						cancelColor: "#8F8F94",
						confirmColor: "#3C9CFF",
						success: function(res) {
							if (res.confirm) {
								that.$u.route({
									url: 'pages/componet/main/students/index',
								})
							}
						}
					})
				} else if (n === 1 && this.studentState === 1) {
					// console.log(111)
					uni.$u.toast("学生信息审核中!")
				} else if (n === 1 && this.studentState === 2) {
					this.$emit("change", 1)
				} else if (n === 1 && this.studentState === 3) {
					const that = this
					uni.showModal({
						confirmText: "去录入",
						cancelText: "取消",
						content: "学生信息已驳回请重新提交！",
						cancelColor: "#8F8F94",
						confirmColor: "#3C9CFF",
						success: function(res) {
							if (res.confirm) {
								that.$u.route({
									url: 'pages/componet/main/students/index',
									type: "redirect"
								})
							}
						}
					})
				} else if (n === 2) {
					// console.log("赛事信息")
					this.$emit("change", 2)
				} */

			},
			gotoCourse(item) {
				this.$u.route({
					url: 'pages/componet/college/course/index?id=' + item.id,
				})
			},
			handelImgTab(obj) {
				console.log(1111)
				this.$u.route({
					url: 'pages/componet/acticre/index',
				})
			},
			loginWx() {
				uni.getUserProfile({
					lang: 'zh_CN',
					desc: '用户登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						this.getOpenid(res)
					},
					// 失败回调
					fail: (err) => {
						// 弹出错误
						uni.showModal({
							content: '已拒绝小程序获取信息',
							showCancel: false
						})
					}
				});
			},
			getOpenid(res) {
				uni.login({
					success: (item) => {
						const data = {
							"code": item.code
						}
						getopenId(data).then(el => {
							if (el.openId) {
								res.userInfo.openId = el.openId
								this.WxData.avatarUrl = res.userInfo.avatarUrl
								this.WxData.nickName = res.userInfo.nickName
								this.WxData.openId = el.openId
								//this.userInfo.openId = el.openId
								this.$store.commit("setUserInfo", res.userInfo)
								//console.log(res.userInfo, "setUserInfo")
								uni.setStorage({
									key: 'userInfo',
									data: res.userInfo,
									success: function() {
										console.log("保存登录信息")
									}
								});
								this.getUserByOpenId(el.openId)
							}
						})
					},
				});
			},
			getUserByOpenId(openId) {
				//根据openId 获取用户信息，有信息登录，没有信息新增用户信息
				const data = {
					openId: openId
				}
				getUserByOpenId(data).then(res => {
					if (res.userName) {
						res.username = res.userName
						this.WxData.id = res.id
						this.$store.commit("setUserInfo", res)
						this.userLogin(res)
					} else {
						this.userAdd()
					}
				})
			},
			userAdd() {
				let data = {
					openId: this.$store.state.$userInfo.openId,
					nickName: encodeURI(this.$store.state.$userInfo.nickName),
					avatarUrl: this.$store.state.$userInfo.avatarUrl,
					inviteOpenId: this.$store.state.inviteOpenId
				}
				usersave(data).then(res => {
					if (res) {
						res.openId = data.openId
						this.getUserByOpenId(data.openId)
						// console.log(res, "新增用户")
						// getUserByOpenId(data).then(result => {
						// 	this.$store.commit("setUserInfo", result)
						// })
						// this.userLogin(res)
					}
				})
			},
			userLogin(data) {
				userLogin(data).then(res => {
					if (res.token) {
						console.log(res, "登录")
						this.$store.commit("setUserToken", res.token)
						this.userEdit()
					}
				})
			},
			userEdit() {
				let data = {
					openId: this.WxData.openId,
					nickName: encodeURI(this.WxData.nickName),
					avatarUrl: this.WxData.avatarUrl,
					id: this.WxData.id
				}
				userEdit(data).then(res => {
					if (res) {
						//this.$store.commit("setUserInfo", res)
						this.info()
					}
				})

			},
			showModalPhone() {
				const that = this
				uni.showModal({
					content: "请完善您的个人信息",
					cancelText: "再想想",
					confirmText: "去编辑",
					success: function(res) {
						if (res.confirm) {
							that.$u.route({
								url: 'pages/componet/main/edit/edit'
							})
						}
					}
				})
			},

		},

	}
</script>

<style lang="scss" scoped>
	.lookBtn {
		position: fixed;
		right: 0;
		top: 50%;
		padding: 20rpx;
		font-size: 32rpx;
		background: #3a83da;
		color: #FFFFFF;
		border-bottom-left-radius: 30px;
		border-top-left-radius: 30px;
		padding-left: 10px;
	}

	.detailBox {
		.box {
			background: #317AF7;
			height: 362rpx;
			padding: 24rpx 24rpx 0 24rpx;

			.video {
				width: 100%;
				height: 340rpx;
			}
		}

		// 学习资料
		.study {
			background: #FFFFFF;

			.text {
				width: 100%;
				height: 110rpx;
				line-height: 110rpx;
				background: #FFFFFF;
				font-size: 44rpx;
				color: #000000;
				text-align: center;
				font-weight: bold;
			}
		}

		.bottom {
			width: 100%;
			height: 128rpx;
			line-height: 128rpx;
			//sbackground: #ffffff;
			// padding: 0 24rpx;
			position: fixed;
			bottom: 0;

			.btn {
				margin: 16rpx 24rpx 16rpx 24rpx;
				height: 96rpx;
				line-height: 96rpx;
				background: #4587F7;
				border-radius: 48rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				font-weight: bold;
			}
		}
	}
</style>
